﻿@using System.Globalization
@model ProductOverviewModel
@{
    //prepare "Add to cart" Axios link
    var addtocartlink = "";
    var addtowishlistlink = "";
    var quickviewurl = Url.RouteUrl("QuickView-Product", new { productId = Model.Id });

    var shoppingCartTypeId = (int)ShoppingCartType.ShoppingCart;
    var quantity = 1;
    if (!Model.ShowQty)
    {
        addtocartlink = Model.ProductPrice.ForceRedirectionAfterAddingToCart ? Url.RouteUrl("AddProductCatalog", new { productId = Model.Id, shoppingCartTypeId, quantity, forceredirection = Model.ProductPrice.ForceRedirectionAfterAddingToCart }) : Url.RouteUrl("AddProductCatalog", new { productId = Model.Id, shoppingCartTypeId, quantity });
        addtowishlistlink = Url.RouteUrl("AddProductCatalog", new { productId = Model.Id, shoppingCartTypeId = (int)ShoppingCartType.Wishlist, quantity });
    }
    else
    {
        addtocartlink = Model.ProductPrice.ForceRedirectionAfterAddingToCart ? Url.RouteUrl("AddProductCatalog", new { productId = Model.Id, shoppingCartTypeId, forceredirection = Model.ProductPrice.ForceRedirectionAfterAddingToCart }) : Url.RouteUrl("AddProductCatalog", new { productId = Model.Id, shoppingCartTypeId });
        addtowishlistlink = Url.RouteUrl("AddProductCatalog", new { productId = Model.Id, shoppingCartTypeId = (int)ShoppingCartType.Wishlist });
    }

    var addtocomparelink = Url.RouteUrl("AddProductToCompare", new { productId = Model.Id });
}

@await Component.InvokeAsync("Widget", new { widgetZone = "productbox_before_content", additionalData = Model })
<b-card no-body tag="article" v-bind:class="{mobile: isMobile()}" class="product-box show product-provider mb-2" @@mouseover="hover = true" @@mouseleave="hover = false">
    @if (!string.IsNullOrEmpty(Model.Flag))
    {
        <div class="flag-label">
            @Html.Raw(Model.Flag)
        </div>
    }
    <div class="picture-container">
        <b-link class="img-container" href="@Url.RouteUrl("Product", new { Model.SeName })" title="@Model.DefaultPictureModel.Title">
            <b-card-img-lazy alt="@Model.DefaultPictureModel.AlternateText" class="main-product-img" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title"></b-card-img-lazy>
            @if (!string.IsNullOrEmpty(Model.SecondPictureModel.ImageUrl))
            {
                <b-card-img-lazy class="hover-img" alt="@Model.SecondPictureModel.AlternateText" src="@Model.SecondPictureModel.ImageUrl"></b-card-img-lazy>
            }
        </b-link>
        @if (Model.ProductAttributeModels.Any())
        {
            <div class="attr-container">
                <table>
                    <tbody>
                    @foreach (var item in Model.ProductAttributeModels)
                    {
                        <tr class="attr">
                            <td>
                                @*<div class="attr-name">
                                            @item.Name
                                        </div>*@
                            </td>
                            <td>
                                <div class="attr-value">
                                    @foreach (var spec in item.Values)
                                    {
                                        switch (item.AttributeControlType)
                                        {
                                            case AttributeControlType.DropdownList:
                                            case AttributeControlType.RadioList:
                                            case AttributeControlType.Checkboxes:
                                            case AttributeControlType.ReadonlyCheckboxes:
                                                <b-button variant="light" size="sm" class="name" href="@Url.RouteUrl("Product", new { Model.SeName })?@item.Name=@Html.Raw(spec.Name)">
                                                    @Html.Raw(spec.Name)
                                                </b-button>
                                                break;
                                            case AttributeControlType.ColorSquares:
                                                if (spec.PictureModel.FullSizeImageUrl != null)
                                                {
                                                    <b-button variant="light" size="sm" class="name color-container" title="@spec.Name" v-on:click='productImage' data-href="@spec.PictureModel.FullSizeImageUrl">
                                                        <span class="color" style="background-color:@spec.ColorSquaresRgb;">&nbsp;</span>
                                                    </b-button>
                                                }
                                                else
                                                {
                                                    <b-button variant="light" size="sm" class="name color-container" title="@spec.Name" href="@Url.RouteUrl("Product", new { Model.SeName })?@item.Name=@Html.Raw(spec.Name)">
                                                        <span class="color" style="background-color:@spec.ColorSquaresRgb;">&nbsp;</span>
                                                    </b-button>
                                                }

                                                break;
                                            case AttributeControlType.ImageSquares:
                                                if (spec.PictureModel.FullSizeImageUrl != null)
                                                {
                                                    <b-button variant="light" size="sm" class="p-1 name image-container" v-on:click='productImage' data-href="@spec.PictureModel.FullSizeImageUrl">
                                                        <img src="@spec.ImageSquaresPictureModel?.ImageUrl" alt="@spec.Name"/>
                                                    </b-button>
                                                }
                                                else
                                                {
                                                    <b-button variant="light" size="sm" class="p-1 name image-container" href="@Url.RouteUrl("Product", new { Model.SeName })?@item.Name=@Html.Raw(spec.Name)">
                                                        <img src="@spec.ImageSquaresPictureModel?.ImageUrl" alt="@spec.Name"/>
                                                    </b-button>
                                                }

                                                break;
                                        }
                                    }
                                </div>
                            </td>

                        </tr>
                    }
                    </tbody>
                </table>
            </div>
        }
        <div class="other-buttons">
            @if (!Model.ProductPrice.DisableBuyButton)
            {
                var addToCartText = Loc["ShoppingCart.AddToCart"];
                if (Model.ProductType == ProductType.Reservation)
                {
                    addToCartText = Loc["ShoppingCart.Reservation"];
                }

                if (Model.ProductPrice.AvailableForPreOrder)
                {
                    addToCartText = Loc["ShoppingCart.PreOrder"];
                }

                <b-button v-b-tooltip.hover.bottom title="@(addToCartText)" variant="outline-secondary" onclick="AxiosCart.addproducttocart_catalog('@addtocartlink', '@Model.ShowQty', '@Model.Id');return false;">
                    <span class="icons icon-handbag"></span>
                    <span class="sr-only">AddToCart</span>
                </b-button>
            }
            else
            {
                if (Model.ProductType == ProductType.Auction)
                {
                    var addToCartText = Loc["ShoppingCart.Bids"];
                    <b-button v-b-tooltip.hover.bottom title="@(addToCartText)" variant="outline-secondary" class="add-to-cart-button" onclick="AxiosCart.addproducttocart_catalog('@addtocartlink', 'false', '@Model.Id');return false;">
                        <span class="icons icon-bell"></span>
                        <span class="sr-only">AddToCart</span>
                    </b-button>
                }
            }
            @if (!Model.ProductPrice.DisableWishlistButton && Model.ProductType == ProductType.SimpleProduct)
            {
                <a v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToWishlist"]" class="btn btn-outline-secondary" onclick="AxiosCart.addproducttocart_catalog('@addtowishlistlink', '@Model.ShowQty', '@Model.Id');return false;">
                    <span class="icons icon-heart"></span>
                    <span class="sr-only">AddToWishlist</span>
                </a>
            }
            @if (!Model.ProductPrice.DisableAddToCompareListButton && Model.ProductType == ProductType.SimpleProduct)
            {
                <a v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToCompareList"]" class="btn btn-outline-secondary" onclick="AxiosCart.addproducttocomparelist('@Model.Id', '@Loc["Products.ProductHasBeenAddedToCompareList.Link"]', '@Url.RouteUrl("CompareProducts")')">
                    <span class="sr-only">AddToCompareList</span>
                    <span class="icons icon-shuffle"></span>
                </a>
            }
        </div>
        <div class="qvb-container">
            <a class="quick-view-button w-100 btn btn-secondary" data-target="ModalQuickView" onclick="AxiosCart.quickview_product('@quickviewurl');return false;">
                <span class="icons icon-magnifier"></span>
                <span>@Loc["Products.QuickView"]</span>
            </a>
        </div>
    </div>
    <b-card-body>
        <h5 class="card-title mb-0">
            <a href="@Url.RouteUrl("Product", new { Model.SeName })">
                @Model.Name
            </a>
        </h5>
        @if (Model.ShowSku && !string.IsNullOrEmpty(Model.Sku))
        {
            <span class="sku">@Model.Sku</span>
        }
        <div class="prices-rating">
            @if (Model.ReviewOverviewModel.AllowCustomerReviews)
            {
                decimal ratingValue = 0;
                if (Model.ReviewOverviewModel.TotalReviews != 0)
                {
                    ratingValue = Convert.ToDecimal(Model.ReviewOverviewModel.RatingSum * (double)100 / Model.ReviewOverviewModel.TotalReviews / 100);
                }

                <template>
                    <div class="rating">
                        <b-form-rating id="rating-inline-grid-@Model.Id" class="p-0" variant="warning" no-border size="sm" show-value precision="2" readonly inline value="@(ratingValue)"></b-form-rating>
                        <b-link href="@Url.RouteUrl("Product", new { Model.SeName })">@Model.ReviewOverviewModel.TotalReviews @Loc["Reviews.Overview.Reviews"]</b-link>
                    </div>
                </template>
            }
            @if (Model.ProductType == ProductType.Auction)
            {
                @if (Model.EndTime.HasValue)
                {
                    <div class="countdown-box alert alert-info w-100 mb-1">
                        @if (Model.EndTime > DateTime.UtcNow)
                        {
                            <countdown :end-time="@Model.EndTime.Value.ToUniversalTime().Subtract(new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc)).TotalMilliseconds">
                                <template v-slot:process="{ timeObj }">
                                    <span class="col-form-label">@Loc["AddToCart.Timeleft"]:</span>
                                    <span>{{ `${timeObj.d}` }} : </span>
                                    <span>{{ `${timeObj.h}` }} : </span>
                                    <span>{{ `${timeObj.m}` }} : </span>
                                    <span>{{ `${timeObj.s}` }}</span>
                                </template>
                                <template v-slot:finish>
                                    <span>@Loc["ShoppingCart.Auctionends"]</span>
                                </template>
                            </countdown>
                        }
                        else
                        {
                            <div class="d-inline-flex flex-wrap justify-content-center">
                                <label class="ended-label">@Loc["ShoppingCart.Auctionends"]:</label>
                                <div class="count-date">@Model.EndTimeLocalTime.Value.ToString(CultureInfo.InvariantCulture)</div>
                            </div>
                        }
                    </div>
                }
            }
            <div class="prices @if (Model.ProductType == ProductType.Reservation) { <text>reservation-price</text> } ">
                @if (Model.ProductType != ProductType.Auction)
                {
                    <div class="actual-price price">
                        @Model.ProductPrice.Price
                    </div>
                }
                else
                {
                    <div class="actual-price price">
                        @(Model.ProductPrice.HighestBidValue > 0 ? Model.ProductPrice.HighestBid : Model.ProductPrice.StartPrice)
                    </div>
                }
                @if (!string.IsNullOrEmpty(Model.ProductPrice.OldPrice))
                {
                    <div class="old-price price">
                        @Model.ProductPrice.OldPrice
                    </div>
                }
            </div>
        </div>
    </b-card-body>
    <div class="card-footer">
        <div class="desc">
            @Html.Raw(Model.ShortDescription)
        </div>
        <div class="mt-auto">
            <div class="list-button-container">
                @if (Model.ShowQty)
                {
                    var qtyId = "addtocart_" + Model.Id + "_EnteredQuantity";
                    <input class="form-control input-group-addon catalog-quantity" type="number" id="@qtyId" name="@qtyId" value="1">
                }
                @if (!Model.ProductPrice.DisableBuyButton)
                {
                    var addToCartText = Loc["ShoppingCart.AddToCart"];
                    if (Model.ProductType == ProductType.Reservation)
                    {
                        addToCartText = Loc["ShoppingCart.Reservation"];
                    }

                    if (Model.ProductPrice.AvailableForPreOrder)
                    {
                        addToCartText = Loc["ShoppingCart.PreOrder"];
                    }

                    <b-button variant="outline-secondary" class="add-to-cart-button" onclick="AxiosCart.addproducttocart_catalog('@addtocartlink', '@Model.ShowQty', '@Model.Id');return false;">
                        <span class="add-cart-text">@(addToCartText)</span>
                        <span class="sr-only">AddToCart</span>
                    </b-button>
                }
                else
                {
                    if (Model.ProductType == ProductType.Auction)
                    {
                        var addToCartText = Loc["ShoppingCart.Bids"];
                        <b-button variant="outline-secondary" class="add-to-cart-button" onclick="AxiosCart.addproducttocart_catalog('@addtocartlink', 'false', '@Model.Id');return false;">
                            <span class="add-cart-text">@Loc["ShoppingCart.Bids"]</span>
                            <span class="sr-only">AddToCart</span>
                        </b-button>
                    }
                }
            </div>
        </div>
    </div>
</b-card>